<template>
    <div class="content">
        <h1>echarts 中国-3D 地图</h1>
        <div ref="myEchart" id="personnel"></div>
    </div>
</template>
<script>
    import "echarts-gl"; //3D地图插件
    // 引入地图的json文件
    // require("../assets/map/china.json");
    let areaData = [{
            name: "黑龙江",
            value: [127.9688, 45.368]
        },
        {
            name: "内蒙古",
            value: [110.3467, 41.4899]
        },
        {
            name: "吉林",
            value: [125.8154, 44.2584]
        },
        {
            name: "北京",
            value: [116.4551, 40.2539]
        },
        {
            name: "辽宁",
            value: [123.1238, 42.1216]
        },
        {
            name: "河北",
            value: [114.4995, 38.1006]
        },
        {
            name: "天津",
            value: [117.4219, 39.4189]
        },
        {
            name: "山西",
            value: [112.3352, 37.9413]
        },
        {
            name: "陕西",
            value: [109.1162, 34.2004]
        },
        {
            name: "甘肃",
            value: [103.5901, 36.3043]
        },
        {
            name: "宁夏",
            value: [106.3586, 38.1775]
        },
        {
            name: "青海",
            value: [101.4038, 36.8207]
        },
        {
            name: "新疆",
            value: [87.9236, 43.5883]
        },
        {
            name: "西藏",
            value: [91.11, 29.97]
        },
        {
            name: "四川",
            value: [103.9526, 30.7617]
        },
        {
            name: "重庆",
            value: [108.384366, 30.439702]
        },
        {
            name: "山东",
            value: [117.1582, 36.8701]
        },
        {
            name: "河南",
            value: [113.4668, 34.6234]
        },
        {
            name: "江苏",
            value: [118.8062, 31.9208]
        },
        {
            name: "安徽",
            value: [117.29, 32.0581]
        },
        {
            name: "湖北",
            value: [114.3896, 30.6628]
        },
        {
            name: "浙江",
            value: [119.5313, 29.8773]
        },
        {
            name: "福建",
            value: [119.4543, 25.9222]
        },
        {
            name: "江西",
            value: [116.0046, 28.6633]
        },
        {
            name: "湖南",
            value: [113.0823, 28.2568]
        },
        {
            name: "贵州",
            value: [106.6992, 26.7682]
        },
        {
            name: "云南",
            value: [102.9199, 25.4663]
        },
        {
            name: "广东",
            value: [113.12244, 23.009505]
        },
        {
            name: "广西",
            value: [108.479, 23.1152]
        },
        {
            name: "海南",
            value: [110.3893, 19.8516]
        },
        {
            name: "上海",
            value: [121.4648, 31.2891]
        },
        {
            name: "台湾",
            value: [121.520076, 25.030724]
        },
    ];
    export default {
        data() {
            return {
                count: 0,
                myChart: null,
                name: "",
                option: {
                    geo3D: {
                        data: areaData,
                        roam: true,
                        map: "china",
                        itemStyle: {
                            color: "#2d58bd", //地图块颜色
                            borderWidth: 1, //分界线wdith
                            borderColor: "#fff", //分界线颜色
                            backgroundColor: "transparent",
                        },
                        label: {
                            show: false, //默认是否显示名称
                        },
                        zlevel: 7,
                        emphasis: {
                            //当鼠标放上去的状态
                            label: {
                                show: true,
                            },
                            itemStyle: {
                                color: "#000",
                            },
                        },
                        tooltip: "axis", //提示框设置
                        formatter: (param) => {
                            console.log(param);
                        },
                        emphasis: {
                            //当鼠标放上去  地区区域是否显示名称
                            label: {
                                show: true,
                                textStyle: {
                                    color: "#000",
                                    fontSize: 11,
                                },
                            },
                            itemStyle: {
                                color: "#d1801e", //地图高亮颜色
                            },
                        },
                        regions: [{
                            name: "山东",
                            itemStyle: {
                                color: "#f8b440",
                                opacity: 1,
                            },
                            label: {
                                show: true,
                            },
                        }, ], //默认高亮区域
                    },
                    series: [{
                            type: "map3D",
                            map: "china",
                            selectedMode: "single", //地图高亮单选
                            label: {
                                textStyle: {
                                    borderWidth: 0, //标签上边框宽度
                                    fontSize: 14, //字体大小
                                },
                                formatter: "{b}",
                            },
                            zlevel: 6,
                        },
                        {
                            name: "青岛市点坐标显示",
                            type: "scatter3D",
                            coordinateSystem: "geo3D",
                            symbol: "circle",
                            color: "#fff",
                            symbolSize: 10,
                            label: {
                                show: false, //是否显示点上面的标签，默认false
                                textStyle: {
                                    borderWidth: 0, //标签上边框宽度
                                    borderColor: "white", //边框颜色
                                    fontSize: 14, //字体大小
                                },
                                formatter: "{b}",
                            },
                            zlevel: 7,
                            emphasis: {
                                //当鼠标放上去  地区区域是否显示名称
                                label: {
                                    show: false,
                                },
                                itemStyle: {
                                    color: "#000",
                                },
                            },
                            data: areaData,
                        },
                    ],
                    tooltip: {
                        trigger: "item",
                        backgroundColor: "transparent",
                        borderWidth: 0,
                        padding: 0,
                        margin: 0,
                        axisPointer: {
                            type: "cross",
                        },
                        extraCssText: "box-shadow: 0 0 10px transparent", // 额外附加到浮层的 css 样式
                        formatter: (param) => {
                            var data = `
                         <div class="layer-bg">
                            <div class="content-box" style="background:'#00133d'">
                                <div class="content" v-if="name">
                                    <p class="name">${param.name}</p>
                                    <div class="item">
                                        <span>总面积</span>
                                        <span class="count">20</span>
                                        <span class="ratio"></span>
                                    </div>
                                    <div class="item">
                                        <span>人口总数（男）</span>
                                        <span class="count">51000000</span>
                                        <span class="ratio">51%</span
                                        >
                                    </div>
                                    <div class="item">
                                        <span>人口总数（女）</span>
                                        <span class="count">49000000</span>
                                        <span class="ratio">49%</span
                                        >
                                    </div>
                                </div>
                            </div>
                        </div>
                        `;
                            return data;
                        },
                    },
                },
            };
        },
        methods: {
            /**
             * 加载3D地图
             */
            getMap3d() {
                this.myChart = this.$echarts.init(this.$refs.myEchart);
                this.myChart.setOption(this.option);
                //地图定时切换
                setInterval(() => {
                    this.option.geo3D.regions[0].name =
                        this.option.geo3D.data[this.count].name;
                    this.myChart.setOption(this.option);
                    this.count++;
                    if (this.count === this.option.geo3D.data.length) {
                        this.count = 0;
                    }
                }, 2000);
            },
        },
        mounted() {
            this.$nextTick(() => {
                this.getMap3d();
            });
        },
    };
</script>
<style lang='scss' scoped>
    .content {
        position: relative;

        h1 {
            position: absolute;
            top: 0.14rem;
            left: 50%;
            transform: translateX(-50%);
            height: 0.22rem;
            font-size: 0.22rem;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: #061d49;
            margin: 0;
        }

        #personnel {
            width: calc(100vw - 210px);
            height: calc(100vh - 50px);
        }

        /deep/ .layer-bg {
            flex: 1;
            width: 2.49rem;
            height: 1.45rem;
            /* background: url("../../assets/img/弹框@2x.png"); */
            background-size: 2.49rem 1.45rem;
            background-repeat: no-repeat repeat;
            position: relative;

            .content-box {
                position: relative;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-content: flex-start;
                background: transparent;

                .content {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    text-align: center;
                    color: #fff;

                    .name {
                        margin: 0.28rem 0 0rem 0;
                        color: #26d1d6;
                        font-size: 0.1rem;
                    }

                    .item {
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        font-size: 0.12rem;
                        padding: 0rem 0.3rem 0.02rem 0.25rem;
                        text-align: left;
                        color: #26d1d6;

                        span {
                            display: inline-block;

                            &:first-child {
                                width: 2rem;
                            }

                            &.count {
                                display: block;
                                width: 1rem;
                                text-align: right;
                            }

                            &.ratio {
                                display: block;
                                width: 1.5rem;
                                text-align: right;
                            }
                        }
                    }
                }
            }
        }
    }
</style>